.detail-page-header.gl-gap-3
  .detail-page-header-body
    = gl_badge_tag milestone_status_string(milestone), { variant: milestone_badge_variant(milestone) }, { class: 'gl-mr-3' }

    .header-text-content.gl-grow.gl-truncate
      %span.identifier
        %strong
          = _('Milestone')
      - if milestone.due_date || milestone.start_date
        = milestone_date_range(milestone)
    = render Pajamas::ButtonComponent.new(icon: 'chevron-double-lg-left', button_options: { 'aria-label' => _('Toggle sidebar'), class: 'btn-grouped !gl-float-right @sm/panel:gl-hidden js-sidebar-toggle js-milestone-toggle' })

  - can_admin = can?(current_user, :admin_milestone, @group || @project)
  - can_promote = @project && can_admin_group_milestones? && milestone.project

  .milestone-buttons.detail-page-header-actions.gl-flex.gl-self-start.gl-gap-3
    - if can_admin
      - if milestone.active?
        = render Pajamas::ButtonComponent.new(href: update_milestone_path(milestone, { state_event: :close }), method: :put, button_options: { class: 'btn-close gl-hidden @md/panel:gl-inline-flex' }) do
          = _('Close milestone')
      - else
        = render Pajamas::ButtonComponent.new(href: update_milestone_path(milestone, { state_event: :activate }), method: :put, button_options: { class: 'gl-hidden @md/panel:gl-inline-flex' }) do
          = _('Reopen milestone')

    .js-vue-milestone-actions{ data: { id: milestone.id,
      title: milestone.title,
      is_active: milestone.active?.to_s,
      show_delete: can_admin.to_s,
      is_detail_page: 'true',
      milestone_url: Gitlab::UrlBuilder.build(milestone, only_path: true),
      edit_url: can_admin ? edit_milestone_path(milestone) : '',
      close_url: can_admin ? update_milestone_path(milestone, { state_event: :close }) : '',
      reopen_url: can_admin ? update_milestone_path(milestone, { state_event: :activate }) : '',
      promote_url: can_promote ? promote_project_milestone_path(milestone.project, milestone) : '',
      group_name: can_promote && milestone.project_milestone? && milestone.project.group ? milestone.project.group.name : '',
      issue_count: milestone.issues.count,
      merge_request_count: milestone.merge_requests.count
    } }
